<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 应用中心->应用实例
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row :gutter="10">
                <el-col :sm="24" :md="12">
                    <el-card class="handle-box" style="height: 420px">
                        <div slot="header" class="clearfix">
                            <el-input v-model="query.param.name"
                                      placeholder="节点名称/IP地址"
                                      style="width: 50%"
                                      @keyup.enter.native="getData">
                                <el-button slot="append"
                                           icon="el-icon-search"
                                           @click="getData"/>
                            </el-input>
                            <el-button type="primary"
                                       icon="el-icon-plus"
                                       @click="handleAdd"
                                       style="float: right;">新增
                            </el-button>
                        </div>
                        <el-table
                                :data="tableData"
                                border
                                class="table"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                                @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="35" align="center"></el-table-column>
                            <el-table-column prop="node" label="节点名称" width="100" align="center"></el-table-column>
                            <el-table-column prop="ipAddr" label="IP地址"></el-table-column>
                            <el-table-column prop="port" label="端口"></el-table-column>
                            <el-table-column label="操作" width="130" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" icon="el-icon-edit"
                                               @click="handleEdit(scope.$index, scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button type="text" icon="el-icon-delete" class="red"
                                               @click="handleDelete(scope.$index, scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page="query.pageVo.pageNo"
                                    :page-size="query.pageVo.pageSize"
                                    :total="query.pageVo.pageTotal"
                                    @current-change="handlePageChange"
                            ></el-pagination>
                        </div>
                    </el-card>
                </el-col>
                <el-col :sm="24" :md="12">
                    <el-card class="handle-box" style="height: 420px">
                        <div slot="header" class="clearfix">
                            <el-button type="primary"
                                       icon="el-icon-check"
                                       @click="saveEdit"
                                       style="float: right;">保存
                            </el-button>
                        </div>
                        <el-form ref="form" :model="formData" label-width="120px">
                            <el-form-item label="节点名称">
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="域描述">
                                <el-input v-model="formData.label"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input type="textarea" v-model="formData.remark"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import { listDomainByPage, getDomain, saveDomain, deleteDomain } from '../../api/appic/appDomain';

    export default {
        name: 'basetable',
        data() {
            return {
                query: {
                    param:{
                        name: ''
                    },
                    pageVo:{
                        pageNo: 1,
                        pageSize: 10
                    }
                },
                tableData:[],
                formData: {},
                id: -1
            };
        },
        created() {
            this.getData();
        },

        //方法区
        methods: {
            //获取应用域列表
            getData() {
                listDomainByPage(this.query).then(res => {
                    this.tableData = res.data.rows;
                    this.pageTotal = res.data.total || 50;
                });
            },
            //触发查询按键
            handleQuery() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    deleteDomain(this.tableData[index].id).then(result =>{
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                    });
                })
                .catch(() => {
                    alert("异常！")
                });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 新增操作
            handleAdd(){
                this.idx = -1;
                this.formData = {};
            },
            // 编辑操作
            handleEdit(index, row) {
                this.idx = index;
                this.formData = row;
            },
            // 保存编辑
            saveEdit() {
                saveDomain(this.formData).then(result => {
                    if(this.idx >= 0){
                        this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        this.$set(this.tableData, this.idx, result.data);
                    }else{
                        this.$message.success(`新增保存应用域成功`);
                        this.getData();
                    }
                });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 10px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

</style>